<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="shortcut icon " type="images/x-icon" href="/img/logo.png">
</head>

<body style="overflow: hidden;width: 100%;overflow-y: auto">
<!--导航栏-->
<nav class="navbar navbar-light bg-light navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl shadow mb-5">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand mx-5  text-primary" href="/index">Community</a>
    <div class="collapse navbar-collapse row">
        <div class="offset-9 offset-sm-9 col-md-9 offset-lg-9 offset-xl-9">
            <ul class="navbar-nav ml-4 ">
                <a class="nav-link mr-2" href="/reset">忘记密码</a>
                <!--  注销使用带有a样式的button，触发模态框-->
                <button type="button" class="btn btn-link nav-item nav-link mx-2" data-toggle="modal"
                        data-target="#logoutmodal">
                    注销
                </button>
                <a class="nav-item nav-link ml-2" href="/register">注册</a>
            </ul>
        </div>
    </div>
</nav>

<!--登录框和介绍-->
<div class="container mt-5">

    <!--    错误提示框-->
    <div class="alert alert-warning alert-dismissible fade show" role="alert" th:if="${error} != null">
        <strong>出问题啦！</strong> <span th:text="${error}"> 请输入详细信息之后再发布哦。</span>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="jumbotron jumbotron-fluid col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 float-left bg-info show"
         th:if="${signal} != 1">
        <div class="container">
            <h1 class="text-light">现在登陆</h1>
            <p class="lead text-light">加入到社区，分享您的生活点滴吧</p>
        </div>
    </div>

    <div class="col-7 col-sm-7 col-md-7 col-lg-7 col-xl-7 float-right ml-4" th:if="${signal} != 1">
        <form method="post" action="/login">
            <div class="input-group flex-nowrap my-5">
                <div class="input-group-prepend ">
                    <span class="input-group-text">账号</span>
                </div>
                <input type="email" class="form-control" id="userId" name="userId" placeholder="邮箱"
                       th:value="${userId}">
            </div>

            <div class="input-group flex-nowrap my-5">
                <div class="input-group-prepend ">
                    <span class="input-group-text">密码</span>
                </div>
                <input type="password" class="form-control" id="password" name="password" placeholder="密码">
            </div>
            <button type="submit" class="btn btn-primary btn-lg  btn-block my-5">登录</button>
        </form>
    </div>
</div>

<div>
    <p class="text-center text-black-50">Copyright &copy; 2020, All</p>
    <p class="text-center text-black-50">鄂ICP备123456号</p>
</div>

<!-- 注销模态框，需要按钮触发-->
<div class="modal fade" id="logoutmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!--                <h5 class="modal-title" id="exampleModalLabel"></h5>-->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="font-weight-bold text-danger">您确定要注销当前账户吗</p>
            </div>
            <div class="modal-footer">
                <form action="/logout" method="get">
                    <button type="submit" class="btn btn-primary">确定</button>
                </form>
            </div>
        </div>
    </div>
</div>


<!--依赖的JS-->
<script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
</body>
</html>
